<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.css" rel="stylesheet">
    <link th:href="@{/css/setting.css}" rel="stylesheet" />
    <link href="https://at.alicdn.com/t/font_2866320_i02r3rlrf7l.css" rel="stylesheet" type="text/css" />
    <title>系统设置-成信大抽奖系统</title>
</head>

<body>
    <div class="container">
        <div class="innerBox my-3">
            <div class="w-100 text-end">
                <span id="login_usr"></span>
                <a onclick="settings()" class="logoutText">系统设置</a>
                <a onclick="logout()" class="logoutText">退出登录</a>
            </div>
            <div class="text-center">
                <h4>系统设置</h4>
            </div>
            <div class="settingItem" th:each="item : ${settings}">
                <div  th:switch="${item.skey} eq 'range'">
                    <div th:case="true">
                        <div class="title-container" th:text="${item.descr}"></div>
                        <div class="row mt-3">
                            <div class="input-group col">
                                <span class="input-group-text">最小值</span>
                                <input type="number" max="4" class="form-control" placeholder="抽奖学号下限" id="rangeMin"
                                       th:value="${#strings.arraySplit(item.sval, ',')[0]}">
                            </div>
                            <div class="input-group col">
                                <span class="input-group-text">最大值</span>
                                <input type="number" max="4" class="form-control" placeholder="抽奖学号上限" id="rangeMax"
                                       th:value="${#strings.arraySplit(item.sval, ',')[1]}">
                            </div>
                            <div class="col">
                                <button class="btn btn-primary" onclick="changeRange()">修改</button>
                            </div>
                        </div>
                    </div>
                    <div th:case="false">
                        <div class="title-container mt-3" th:text="${item.descr}"></div>
                        <div class="row mt-3">
                            <div class="input-group col">
                                <span class="input-group-text" th:text="${item.descr}"></span>
                                <input type="text" class="form-control" th:id="${item.skey}" th:value="${item.sval}">
                            </div>
                            <div class="col">
                                <button class="btn btn-primary" th:onclick="change([[${item.skey}]]);">修改</button>
                            </div>
                        </div>
                    </div>
                </div>



            </div>


        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>
    <script>
        isLogin();
        allSettings();
        function allSettings(){
            $.ajax({
                url: '/setting/getAll',
                method: 'GET',
                success(data) {
                    console.log(data);
                }
            });
        }
        function change(id){
            let val = $('#'+id).val();
            $.ajax({
                url: '/setting/update',
                method: 'POST',
                data: {
                    "skey": id,
                    "sval": val
                },
                success(data){
                    if(data){
                        alert("修改成功");
                    } else {
                        alert("修改失败");
                    }
                    location.href='/setting/'
                }
            });
        }
        function changeRange(){
            let min = $('#rangeMin').val();
            let max = $('#rangeMax').val();
            $.ajax({
                url: '/setting/update',
                method: 'POST',
                data: {
                    "skey": 'range',
                    "sval": min+','+max
                },
                success(data){
                    console.log(data);
                    if(data){
                        location.href='/';
                        alert("修改成功");
                    } else {
                        location.href='/setting/';
                        alert("修改失败");
                    }
                }
            });
        }
        //判断登录状态
        function isLogin(){
            let item = sessionStorage.getItem("userInfo");
            if(item === null){
                location.href='/user/login';
            } else {
                $('#login_usr').text(item);
            }
        }
        // 退出登录
        function logout(){
            sessionStorage.clear();
            location.href='/user/login';
        }
    </script>
</body>

</html>
